<html>
  <head>
    <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/css/main.css" />
    <meta content={{ keywords }} name='keywords' />
    <meta content={{ description }} name="description" />
    <title>{{ title }}</title>
    <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css" />
  </head>

  <body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Qeeniao Task</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/admin">任务 <span class="sr-only">(current)</span></a></li>
          </ul>
          
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div class="container" style="margin-top: 60px">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          {% if flash.error %}
          <div class="alert alert-danger" role="alert">{{ flash.error }}</div>
          {% endif %}

          <div class="panel panel-primary" >
            <div class="panel-heading">
              导入文件生成任务
            </div>
            <div class="panel-body">
              <div class="row" style="margin-bottom: 15px">
                <div class="col-xs-3">
                  <label>选择生成任务的文件</label>
                  <input type="file" class="form-control cols-xs-3 fileupload" name='files[]' data-url="/admin/task/doexport" multiple/>
                </div>
              </div>
              <form action="/admin/task/doAdd" method="post">
                <div class="row" style="margin-bottom: 15px">
                  <div class="col-xs-6">
                    <label for="exampleInputEmail1">APP名称</label>
                    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="APP名称" name="name">
                  </div>
                </div>

                <div class="form-group">
                  <label for="exampleInputPassword1">APP描述</label>
                  <textarea class="form-control" name="description" id='description' placeholder="APP描述" style="width: 720px;height: 120px"></textarea>
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">APP要求</label>
                  <textarea class="form-control" name="demand" id='demand' placeholder="APP要求" style="width: 720px;height: 120px"></textarea>
                </div>
                <div class="row" style="margin-bottom: 15px">
                  <div class="col-xs-3">
                    <label for="InputDate">发布时间</label>
                    <div class='input-group date' id='datetimepicker'>
                      <input type='text' name="date" placeholder="APP发布时间" class="form-control" />
                      <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label>
                  任务指定 <a id='addMember'>添加人员</a>
                  </label>
                  <table class="table">
                    <thead>
                      <tr>
                        <th>指定人员</th>
                        <th>评论内容</th>
                      </tr>
                    </thead>
                    <tbody id='memberList'></tbody>
                  </table>
                </div>
                <button type="submit" class="btn btn-primary">发布任务</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="//cdn.bootcss.com/jquery/2.0.1/jquery.min.js"></script>
  <script type="text/javascript" src="//cdn.bootcss.com/moment.js/2.10.6/moment.min.js"></script>
  <script type="text/javascript" src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="//cdn.bootcss.com/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js"></script>
  <script type="text/javascript" src="/js/main.js"></script>

  <script type="text/javascript" src="/js/jquery.ui.widget.js"></script>
  <script type="text/javascript" src="/js/jquery.iframe-transport.js"></script>
  <script type="text/javascript" src="/js/jquery.fileupload.js"></script>
  <script type="text/javascript">
  $(function () {
    $('.fileupload').each(function () {
      $(this).fileupload({
        dropZone: $(this),
        done:function(err,data){
          var data = data['result'];

          if(data['success']){
            if(data['data']['name']){
              $('input[name="name"]').val(data['data']['name']);
            }

            if(data['data']['description']){
              $('textarea[name="description"]').val(data['data']['description']);
            }

            if(data['data']['demand']){
              $('textarea[name="demand"]').val(data['data']['demand']);
            }

            if(data['data']['memberName']){
              var i = 0;
              var name;
              while(name = data['data']['memberName'][i]){
                var content = '';
                if(data['data']['memberContent'][i]){
                  content = data['data']['memberContent'][i];
                }
                $('#memberList').append('<tr><td><input value="'+name+'" placeholder="请输入人员名称" type="text" class="form-control" name="memberName[]"></td><td><textarea placeholder="请输入评论内容" class="form-control memberContent" name="memberContent[]">'+content+'</textarea></td></tr>');
                i++;
              }
            }
          }
          console.log('data:',data);
        }
      });
    });
  });

  </script>
  <script type="text/javascript">
  $(function(){
    $('#datetimepicker').datetimepicker({
      format: 'YYYY-MM-DD'
    });

    $('#addMember').click(function(){
      $('#memberList').append('<tr><td><input placeholder="请输入人员名称" type="text" class="form-control" name="memberName[]"></td><td><textarea placeholder="请输入评论内容" class="form-control memberContent" name="memberContent[]"></textarea></td></tr>');
    });
  });
  </script>
</html>